<template>
	<div class="pdf">
		<div class="show" v-show="loaded && viewType === '2'">
			<Pdf v-for="index in numPages" :key="index" :src="pdfUrl" :page="index" />
			<!-- 同意按钮 -->
      <button class="theme-btn" :class="{ disabled: countdown > 0 && isView === '2'}" @click="agreePdf">
        {{ countdown > 0 && isView === '2' ? `同意${countdown}秒` : '同意' }}
      </button>
		</div>
		<div class="show" v-if="viewType === '1'">
			<div v-html="pdfUrl" style="padding: 20px;"></div>
			<div style="height: 36px"></div>
			<!-- 同意按钮 -->
      <button class="theme-btn" :class="{ disabled: countdown > 0 && isView === '2'}" @click="agreePdf">
        {{ countdown > 0 && isView === '2' ? `同意${countdown}秒` : '同意' }}
      </button>
		</div>
	</div>
</template>

<script>
	import Pdf from 'vue-pdf';
	export default {
		name: 'vue_pdf_preview',
		props: {
			// 授权书
			pdfUrl: {
				type: String,
				default: '',
			},
      isView: {
        type: String,
        default: '2',
      },
			viewType: {
				type: String,
				default: ''
			}
		},
		components: {
			Pdf,
		},
		data() {
			return {
				// // 总页数
				// pageTotalNum: 5,
				// // 当前页数
				// pageNum: 1,
				// // 加载进度
				// loadedRatio: 0,
				// // 页面加载完成
				// curPageNum: 0,
				// // 放大系数 默认百分百
				// scale: 100,
				// // 旋转角度 ‘90’的倍数才有效
				// pageRotate: 0,
				// // 单击内部链接时触发 (目前我没有遇到使用场景)
				// page: 0,
				numPages: null,
				loaded: false,
        countdown: 8,
        countdownInterval: null,
				showPdf: null
			};
		},
		watch: {},
		computed: {},
		created() {
			if(this.viewType === '2') {
				this.loadPdf();
			}
			// 开始倒计时
			const _this = this;
			this.countdownInterval = setInterval(() => {
				this.countdown--;
				if (this.countdown === 0) {
					clearInterval(_this.countdownInterval); // 倒计时结束时清除定时器
				}
			}, 1000);
		},
		mounted() {},
    destroyed() {
      clearInterval(this.countdownInterval)
    },
		methods: {
			loadPdf() {
				this.showPdf = Pdf.createLoadingTask(this.pdfUrl);
				this.showPdf.promise.then((pdf) => {
					this.$nextTick(() => {
						this.numPages = pdf.numPages; // pdf总页数
						this.loaded = true;
					});
				});
			},
      agreePdf() {
				if(this.countdown > 0 && this.isView === '2') return
        this.$emit('agreePdf')
      },
			//下载PDF
			fileDownload(data, fileName) {
				let blob = new Blob([data], {
					//type类型后端返回来的数据中会有，根据自己实际进行修改
					type: 'application/pdf;charset-UTF-8',
				});
				let filename = fileName || 'pdf.pdf';
				if (typeof window.navigator.msSaveBlob !== 'undefined') {
					window.navigator.msSaveBlob(blob, filename);
				} else {
					var blobURL = window.URL.createObjectURL(blob);
					// 创建隐藏<a>标签进行下载
					var tempLink = document.createElement('a');
					tempLink.style.display = 'none';
					tempLink.href = blobURL;
					tempLink.setAttribute('download', filename);
					if (typeof tempLink.download === 'undefined') {
						tempLink.setAttribute('target', '_blank');
					}
					document.body.appendChild(tempLink);
					tempLink.click();
					document.body.removeChild(tempLink);
					window.URL.revokeObjectURL(blobURL);
				}
			},

			//放大
			scaleD() {
				this.scale += 5;
				this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%';
			},

			//缩小
			scaleX() {
				// scale 是百分百展示 不建议缩放
				if (this.scale == 100) {
					return;
				}
				this.scale += -5;
				console.log(parseInt(this.scale) + '%');
				this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%';
			},
			// 切换上一页
			prePage() {
				var p = this.pageNum;
				p = p > 1 ? p - 1 : this.pageTotalNum;
				this.pageNum = p;
			},
			// 切换下一页
			nextPage() {
				var p = this.pageNum;
				p = p < this.pageTotalNum ? p + 1 : 1;
				this.pageNum = p;
			},
			// 顺时针选中角度
			clock() {
				this.pageRotate += 90;
			},
			// 逆时针旋转角度
			counterClock() {
				this.pageRotate -= 90;
			},
			// pdf 有密码 则需要输入秘密
			password(updatePassword, reason) {
				updatePassword(prompt('password is "test"'));
				console.log('...reason...');
				console.log(reason);
				console.log('...reason...');
			},
			// 页面加载成功  当前页数
			pageLoaded(e) {
				this.$emit('current', e);
				this.curPageNum = e;
			},
			// 异常监听
			pdfError(error) {
				console.error(error);
			},
			// 打印所有
			pdfPrintAll() {
				this.$refs.pdf.print();
			},
			// 打印 第一页和第二页
			pdfPrint() {
				// 第一个参数 文档打印的分辨率
				// 第二个参数 文档打印的页数
				this.$refs.pdf.print(100, [1, 2]);
			},
			// 获取当前页面pdf的文字信息内容
			logContent() {
				this.$refs.pdf.pdf.forEachPage(function (page) {
					return page.getTextContent().then(function (content) {
						let text = content.items.map((item) => item.str);
						let allStr = content.items.reduce((initVal, item) => (initVal += item.str), '');
						console.log(allStr); // 内容字符串
						console.log(text); // 内容数组
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import '@/assets/css/demo/index.scss';
	.pdf {
		border-top: 1px solid rgba(255, 255, 255, 0);
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		background: #ffffff;
		z-index: $zIndex-popup;
		overflow-y: auto;
		// border: 1px solid red;
		height: 100vh;
		// padding-bottom: 30px;
		.show {
			overflow: auto;
			margin: auto;
			max-width: 100%;
			height: 100%;
			// max-height: 530px;
		}
		.pdf_footer {
			position: sticky;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 10px 0;
			background-color: rgba(255, 255, 255, 0.5);
			.info {
				display: flex;
				flex-wrap: wrap;
				div {
					width: 30%;
				}
			}
			.operate {
				margin: 10px 0 0;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				div {
					// width: 80px;
					text-align: center;
					font-size: 15px;
				}
				.btn {
					cursor: pointer;
					margin: 5px 10px;
					width: 12%;
					border-radius: 10px;
					padding: 5px;
					color: #fff;
					background-color: #3dcbbc;
				}
			}
		}
    .yzm-btn {

    }
	}
</style>
